<template>
  <div class="app">
    <!-- 后端服务不可用警告 -->
    <div v-if="showBackendWarning" class="backend-warning">
      <div class="container">
        <p><i class="warning-icon">⚠️</i> 后端服务暂时不可用，当前正在使用模拟数据。</p>
      </div>
    </div>
    
    <!-- 导航栏 -->
    <header class="header">
      <div class="container">
        <nav class="navbar">
          <div class="logo">
            <div class="logo-icon">
              <svg width="40" height="40" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
                <!-- 变形金刚头部轮廓 -->
                <path d="M40 12L16 28v28l24 16 24-16V28L40 12z" stroke="url(#gradient-primary)" stroke-width="4" fill="none"></path>
                <!-- 额头细节 -->
                <path d="M30 24L40 16l10 8" stroke="url(#gradient-primary)" stroke-width="3" fill="none"></path>
                <!-- 眼睛 -->
                <path d="M32 36h4M44 36h4" stroke="url(#gradient-primary)" stroke-width="3" stroke-linecap="round"></path>
                <!-- 面罩/嘴部 -->
                <path d="M32 46h16v6H32z" fill="url(#gradient-primary)"></path>
                <!-- 天线/耳朵 -->
                <path d="M24 28v-6M56 28v-6" stroke="url(#gradient-primary)" stroke-width="3" stroke-linecap="round"></path>
                <!-- 下巴 -->
                <path d="M36 60h8" stroke="url(#gradient-primary)" stroke-width="3" stroke-linecap="round"></path>
                <!-- 渐变定义 -->
                <defs>
                  <linearGradient id="gradient-primary" x1="0%" y1="0%" x2="100%" y2="100%">
                    <stop offset="0%" stop-color="var(--primary-color)"></stop>
                    <stop offset="100%" stop-color="var(--secondary-color)"></stop>
                  </linearGradient>
                </defs>
              </svg>
            </div>
            <div class="logo-text">AI+ Home</div>
          </div>
          <ul class="nav-links">
            <li><a href="#home" class="nav-link" data-target="home">首页</a></li>
            <li><a href="#api-services" class="nav-link" data-target="api-services">API服务</a></li>
            <li><a href="#hot-products" class="nav-link" data-target="hot-products">热点产品</a></li>
            <li class="dropdown">
              <a href="#ai-technologies" class="nav-link dropdown-toggle" data-target="ai-technologies">AI技术</a>
              <div class="dropdown-menu">
                <a href="#ai-technologies" class="dropdown-item" data-target="ai-technologies">语音AI</a>
                <a href="#ai-technologies" class="dropdown-item" data-target="ai-technologies">图像AI</a>
                <a href="#ai-technologies" class="dropdown-item" data-target="ai-technologies">文本AI</a>
              </div>
            </li>
            <li><a href="#ai-agent" class="nav-link" data-target="ai-agent">AI Agent</a></li>
            <li><a href="#solutions" class="nav-link" data-target="solutions">AI解决方案</a></li>
          </ul>
          <div class="nav-actions">
            <div v-if="!isAuthenticated" class="auth-buttons">
              <button @click="showLoginModal = true" class="btn btn-outline">登录</button>
              <button @click="showRegisterModal = true" class="btn btn-primary">注册</button>
            </div>
            <div v-else class="user-info">
              <button @click="toggleUserProfile" class="btn btn-secondary" title="个人信息">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
                </svg>
                {{ username }}
              </button>
              <button @click="logout" class="btn btn-outline">退出</button>
            </div>
          </div>
        </nav>
      </div>
    </header>

    <!-- 英雄区域 -->
    <section id="home" class="hero" ref="heroSection">
      <!-- 轮播背景容器 -->
      <div class="hero-carousel" ref="carousel">
        <!-- 轮播图片 -->
        <div class="carousel-image active" style="background-image: url('https://picsum.photos/id/1/1920/1080');"></div>
        <div class="carousel-image" style="background-image: url('https://picsum.photos/id/20/1920/1080');"></div>
        <div class="carousel-image" style="background-image: url('https://picsum.photos/id/96/1920/1080');"></div>
      </div>
      
      <div class="container">
        <div class="hero-content">
          <h2>让你的AI创意触达全球</h2>
          <p>用AI联众世界</p>
          <p class="subtitle">Connect the world with AI</p>
          <a href="#products" class="btn btn-primary">立即探索</a>
        </div>
      </div>
    </section>

    <!-- AI服务 -->
    <section id="ai-services" class="section" @click="navigateToApiServices">
      <div class="container">
        <h2 class="section-title">AI服务</h2>
        <div class="grid grid-2">
          <div class="card service-card">
            <div class="img-container">
              <img src="https://picsum.photos/id/2/400/300" alt="AI智能语音识别服务" loading="lazy">
            </div>
            <h3>智能语音识别服务</h3>
            <p>提供99.5%以上识别准确率的多语言语音转文字服务，支持实时流式识别与批量处理</p>
          </div>
          <div class="card service-card">
            <div class="img-container">
              <img src="https://picsum.photos/id/180/400/300" alt="AI视觉分析服务" loading="lazy">
            </div>
            <h3>视觉分析服务</h3>
            <p>基于深度学习的高精度物体识别、场景理解与图像分析服务，支持2000+物体类别的精准识别</p>
          </div>
          <div class="card service-card">
            <div class="img-container">
              <img src="https://picsum.photos/id/0/400/300" alt="智能文本分析服务" loading="lazy">
            </div>
            <h3>自然语言处理服务</h3>
            <p>提供情感倾向分析、智能关键词提取、多维度文本分类等企业级文本理解能力</p>
          </div>
          <div class="card service-card">
            <div class="img-container">
              <img src="https://picsum.photos/id/160/400/300" alt="智能对话交互系统" loading="lazy">
            </div>
            <h3>智能对话交互系统</h3>
            <p>基于大语言模型的企业级智能对话解决方案，支持多轮交互、意图识别与知识问答</p>
          </div>
          <div class="card service-card">
            <div class="img-container">
              <img src="https://picsum.photos/id/42/400/300" alt="AI定制开发服务" loading="lazy">
            </div>
            <h3>AI定制开发服务</h3>
            <p>根据企业业务需求提供端到端的AI系统定制开发，包括模型训练、集成部署与持续优化</p>
          </div>
          <div class="card service-card">
            <div class="img-container">
              <img src="https://picsum.photos/id/26/400/300" alt="AI企业解决方案定制" loading="lazy">
            </div>
            <h3>企业AI解决方案定制</h3>
            <p>结合行业特点提供定制化AI解决方案，优化业务流程，提升运营效率，增强竞争力</p>
          </div>
        </div>
        <div class="section-footer">
          <a href="#api-services" class="more-link" @click.stop>查看更多 →</a>
        </div>
      </div>
    </section>

    <!-- 登录模态框 -->
    <div class="modal" v-if="showLoginModal" @click.self="showLoginModal = false">
      <div class="modal-content">
        <div class="modal-header">
          <h3>用户登录</h3>
          <button class="close-btn" @click="showLoginModal = false">&times;</button>
        </div>
        <div class="modal-body">
          <form @submit.prevent="handleLogin">
            <div class="form-group">
              <label for="login-username">用户名</label>
              <input type="text" id="login-username" v-model="loginForm.username" required>
            </div>
            <div class="form-group">
              <label for="login-password">密码</label>
              <input type="password" id="login-password" v-model="loginForm.password" required>
            </div>
            <div v-if="loginError" class="error-message">{{ loginError }}</div>
            <button type="submit" class="btn btn-primary" :disabled="loggingIn">
              {{ loggingIn ? '登录中...' : '登录' }}
            </button>
          </form>
        </div>
      </div>
    </div>

    <!-- 注册模态框 -->
    <div class="modal" v-if="showRegisterModal" @click.self="showRegisterModal = false">
      <div class="modal-content">
        <div class="modal-header">
          <h3>用户注册</h3>
          <button class="close-btn" @click="showRegisterModal = false">&times;</button>
        </div>
        <div class="modal-body">
          <form @submit.prevent="handleRegister">
            <div class="form-group">
              <label for="register-username">用户名</label>
              <input type="text" id="register-username" v-model="registerForm.username" required>
            </div>
            <div class="form-group">
              <label for="register-email">邮箱</label>
              <input type="email" id="register-email" v-model="registerForm.email" required>
            </div>
            <div class="form-group">
              <label for="register-password">密码</label>
              <input type="password" id="register-password" v-model="registerForm.password" required>
            </div>
            <div class="form-group">
              <label for="register-confirm-password">确认密码</label>
              <input type="password" id="register-confirm-password" v-model="registerForm.confirmPassword" required>
            </div>
            <div v-if="registerError" class="error-message">{{ registerError }}</div>
            <button type="submit" class="btn btn-primary" :disabled="registering">
              {{ registering ? '注册中...' : '注册' }}
            </button>
          </form>
        </div>
      </div>
    </div>

    <!-- 热点AI产品 -->
    <section id="hot-products" class="section">
      <div class="container">
        <h2 class="section-title">热点AI产品</h2>
        <div class="loading" v-if="loading">
          <div class="spinner"></div>
          <p>加载中...</p>
        </div>
        <div class="error-message" v-else-if="error">
          <p>{{ error }}</p>
          <button @click="fetchProducts" class="btn btn-primary">重试</button>
        </div>
        <div class="grid grid-2" v-else>
          <div v-for="(product, index) in products" :key="product.id" class="card product-card">
            <div class="product-badge" v-if="index === 0">NEW</div>
            <img :src="`https://picsum.photos/id/${product.id * 20}/400/300`" :alt="product.name" class="card-img">
            <h3>{{ product.name }}</h3>
            <p class="product-price">¥{{ product.price.toFixed(2) }}</p>
            <p class="product-description">{{ product.description }}</p>
            <div class="product-stock">库存: {{ product.stock }}</div>
            <button class="btn btn-primary add-to-cart">查看详情</button>
          </div>
        </div>
        <div class="section-footer">
          <a href="#" class="more-link">查看更多 →</a>
        </div>
      </div>
    </section>

    <!-- AI技术专栏 -->
    <section id="ai-technologies" class="section">
      <div class="container">
        <h2 class="section-title">AI技术专栏</h2>
        <div class="grid grid-2">
          <div class="card article-card">
            <img src="https://picsum.photos/id/48/400/300" alt="AI智能技术发展趋势" class="card-img">
            <div class="article-info">
              <img src="https://i.pravatar.cc/150?img=1" alt="John Chen" class="author-avatar">
              <span class="author-name">John Chen</span>
            </div>
            <h3>AI智能技术发展趋势</h3>
            <p>探索人工智能未来发展方向和技术突破点</p>
            <div class="article-meta">
              <span class="read-count">3.2k 阅读</span>
              <span class="like-count">❤ 156</span>
            </div>
          </div>
          <div class="card article-card">
            <img src="https://picsum.photos/id/239/400/300" alt="深度学习在医疗领域的应用" class="card-img">
            <div class="article-info">
              <img src="https://i.pravatar.cc/150?img=2" alt="Michael Johnson" class="author-avatar">
              <span class="author-name">Michael Johnson</span>
            </div>
            <h3>深度学习在医疗领域的应用</h3>
            <p>AI如何改变医疗诊断和患者护理</p>
            <div class="article-meta">
              <span class="read-count">2.8k 阅读</span>
              <span class="like-count">❤ 142</span>
            </div>
          </div>
          <div class="card article-card">
            <img src="https://picsum.photos/id/106/400/300" alt="计算机视觉最新进展" class="card-img">
            <div class="article-info">
              <img src="https://i.pravatar.cc/150?img=3" alt="Emma Thomson" class="author-avatar">
              <span class="author-name">Emma Thomson</span>
            </div>
            <h3>计算机视觉最新进展</h3>
            <p>从目标检测到图像生成的技术演进</p>
            <div class="article-meta">
              <span class="read-count">4.1k 阅读</span>
              <span class="like-count">❤ 198</span>
            </div>
          </div>
          <div class="card article-card">
            <img src="https://picsum.photos/id/60/400/300" alt="大型语言模型优化策略" class="card-img">
            <div class="article-info">
              <img src="https://i.pravatar.cc/150?img=4" alt="David Wilson" class="author-avatar">
              <span class="author-name">David Wilson</span>
            </div>
            <h3>大型语言模型优化策略</h3>
            <p>提升LLM性能和降低计算成本的方法</p>
            <div class="article-meta">
              <span class="read-count">3.5k 阅读</span>
              <span class="like-count">❤ 167</span>
            </div>
          </div>
        </div>
        <div class="section-footer">
          <a href="#" class="more-link">查看更多 →</a>
        </div>
      </div>
    </section>

    <!-- AI解决方案 -->
    <section id="solutions" class="section">
      <div class="container">
        <h2 class="section-title">AI解决方案</h2>
        <div class="grid grid-2">
          <div class="card solution-card">
            <img src="https://picsum.photos/id/237/300/200" alt="智慧城市解决方案" class="card-img">
            <h3>智慧城市解决方案</h3>
            <div class="price-tag">
              <span>方案定制</span>
            </div>
          </div>
          <div class="card solution-card">
            <img src="https://picsum.photos/id/24/300/200" alt="金融风控AI" class="card-img">
            <h3>金融风控AI</h3>
            <div class="price-tag">
              <span>方案定制</span>
            </div>
          </div>
          <div class="card solution-card">
            <img src="https://picsum.photos/id/26/300/200" alt="智能制造平台" class="card-img">
            <h3>智能制造平台</h3>
            <div class="price-tag">
              <span>方案定制</span>
            </div>
          </div>
          <div class="card solution-card">
            <img src="https://picsum.photos/id/28/300/200" alt="零售智能分析" class="card-img">
            <h3>零售智能分析</h3>
            <div class="price-tag">
              <span>方案定制</span>
            </div>
          </div>
        </div>
        <div class="section-footer">
          <a href="#" class="more-link">查看更多 →</a>
        </div>
      </div>
    </section>

    <!-- 页脚 -->
    <!-- Logo集成方案 - 页眉展示版 (可切换查看) -->
<section class="logo-showcase-section" style="display: none;">
  <div class="container">
    <div class="logo-showcase-container">
      <div class="logo-showcase-main">
        <div class="logo-large">
          <div class="logo-icon-large">
            <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
              <circle cx="40" cy="40" r="36" stroke="url(#gradient-primary)" stroke-width="4" fill="none"/>
              <path d="M22 48h10v4h-10z" fill="url(#gradient-primary)"/>
              <path d="M48 48h10v4h-10z" fill="url(#gradient-primary)"/>
              <circle cx="26" cy="32" r="4" fill="url(#gradient-primary)"/>
              <circle cx="54" cy="32" r="4" fill="url(#gradient-primary)"/>
              <path d="M28 68c0-4.42 3.58-8 8-8s8 3.58 8 8" stroke="url(#gradient-primary)" stroke-width="4" fill="none"/>
              <defs>
                <linearGradient id="gradient-primary" x1="0%" y1="0%" x2="100%" y2="100%">
                  <stop offset="0%" stop-color="var(--primary-color)"/>
                  <stop offset="100%" stop-color="var(--secondary-color)"/>
                </linearGradient>
              </defs>
            </svg>
          </div>
          <h1 class="logo-text-large">AI+ Home</h1>
        </div>
        <p class="logo-slogan">专注于人工智能技术研发与应用，赋能企业数字化转型</p>
      </div>
      
      <div class="logo-variations">
        <h3>Logo 变体展示</h3>
        <div class="variations-grid">
          <!-- 变体1: 水平排列 -->
          <div class="logo-variation">
            <h4>水平排列</h4>
            <div class="logo-horizontal">
              <div class="logo-icon-small">
                <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <circle cx="18" cy="18" r="16" stroke="url(#gradient-small)" stroke-width="2" fill="none"/>
                  <path d="M10 22h4v2h-4z" fill="url(#gradient-small)"/>
                  <path d="M22 22h4v2h-4z" fill="url(#gradient-small)"/>
                  <circle cx="12" cy="14" r="2" fill="url(#gradient-small)"/>
                  <circle cx="24" cy="14" r="2" fill="url(#gradient-small)"/>
                  <path d="M13 30c0-2.21 1.79-4 4-4s4 1.79 4 4" stroke="url(#gradient-small)" stroke-width="2" fill="none"/>
                  <defs>
                    <linearGradient id="gradient-small" x1="0%" y1="0%" x2="100%" y2="100%">
                      <stop offset="0%" stop-color="var(--primary-color)"/>
                      <stop offset="100%" stop-color="var(--secondary-color)"/>
                    </linearGradient>
                  </defs>
                </svg>
              </div>
              <span>AI+ Home</span>
            </div>
          </div>
          
          <!-- 变体2: 垂直排列 -->
          <div class="logo-variation">
            <h4>垂直排列</h4>
            <div class="logo-vertical">
              <div class="logo-icon-small">
                <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <circle cx="18" cy="18" r="16" stroke="url(#gradient-small2)" stroke-width="2" fill="none"/>
                  <path d="M10 22h4v2h-4z" fill="url(#gradient-small2)"/>
                  <path d="M22 22h4v2h-4z" fill="url(#gradient-small2)"/>
                  <circle cx="12" cy="14" r="2" fill="url(#gradient-small2)"/>
                  <circle cx="24" cy="14" r="2" fill="url(#gradient-small2)"/>
                  <path d="M13 30c0-2.21 1.79-4 4-4s4 1.79 4 4" stroke="url(#gradient-small2)" stroke-width="2" fill="none"/>
                  <defs>
                    <linearGradient id="gradient-small2" x1="0%" y1="0%" x2="100%" y2="100%">
                      <stop offset="0%" stop-color="var(--primary-color)"/>
                      <stop offset="100%" stop-color="var(--secondary-color)"/>
                    </linearGradient>
                  </defs>
                </svg>
              </div>
              <span>AI+ Home</span>
            </div>
          </div>
          
          <!-- 变体3: 图标优先 -->
          <div class="logo-variation">
            <h4>图标优先</h4>
            <div class="logo-icon-only">
              <svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="30" cy="30" r="28" stroke="url(#gradient-large)" stroke-width="3" fill="none"/>
                <path d="M16 38h8v3h-8z" fill="url(#gradient-large)"/>
                <path d="M36 38h8v3h-8z" fill="url(#gradient-large)"/>
                <circle cx="20" cy="24" r="3" fill="url(#gradient-large)"/>
                <circle cx="40" cy="24" r="3" fill="url(#gradient-large)"/>
                <path d="M22 50c0-3 2-5 5-5s5 2 5 5" stroke="url(#gradient-large)" stroke-width="3" fill="none"/>
                <defs>
                  <linearGradient id="gradient-large" x1="0%" y1="0%" x2="100%" y2="100%">
                    <stop offset="0%" stop-color="var(--primary-color)"/>
                    <stop offset="100%" stop-color="var(--secondary-color)"/>
                  </linearGradient>
                </defs>
              </svg>
            </div>
          </div>
          
          <!-- 变体4: 文字优先 -->
          <div class="logo-variation">
            <h4>文字优先</h4>
            <div class="logo-text-only">
              <span>AI+ Home</span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 切换按钮 -->
      <div class="logo-toggle-buttons">
        <button class="btn btn-primary" onclick="document.querySelector('.logo-showcase-section').style.display = 'none'">隐藏Logo展示</button>
      </div>
    </div>
  </div>
</section>

<!-- Logo切换按钮 -->
<div class="logo-showcase-toggle" style="position: fixed; bottom: 20px; right: 20px; z-index: 2000;">
  <button class="btn btn-secondary" onclick="document.querySelector('.logo-showcase-section').style.display = 'block'">查看Logo展示</button>
</div>

<!-- 移除所有footer结构，只保留必要的个人信息模块 -->
    
    <!-- 用户个人信息模块 - 登录后点击才显示 -->
    <UserProfile :visible="showUserProfile" />
    
  </div>
</template>

<script>
// 延迟加载API服务
const getApiService = async () => {
  const apiModule = await import('./services/api.js');
  return apiModule.default || apiModule;
};

// 懒加载Chart.js，只在需要时导入
const loadChartJs = async () => {
  try {
    const { Chart, registerables } = await import('chart.js');
    Chart.register(...registerables);
    return Chart;
  } catch (error) {
    console.error('Chart.js加载失败:', error);
    return null;
  }
};

// 懒加载组件
const loadProfileSidebar = () => import('./components/ProfileSidebar.vue');
const loadUserProfile = () => import('./components/UserProfile.vue');

export default {
  name: 'App',
  components: {
    // 使用懒加载函数注册组件
    ProfileSidebar: loadProfileSidebar,
    UserProfile: loadUserProfile
  },
  data() {
    return {
      chartInstance: null,
      isMenuOpen: false,
      lastScrollY: 0,
      // 轮播相关数据
      currentSlide: 0,
      carouselImages: [],
      carouselInterval: null,
      // 图片分析缓存
      imageAnalysisCache: null,
      // 认证和产品数据
      isAuthenticated: false,
      username: '',
      showLoginModal: false,
      showRegisterModal: false,
      loginForm: {
        username: '',
        password: ''
      },
      registerForm: {
        username: '',
        email: '',
        password: '',
        confirmPassword: ''
      },
      loginError: '',
      registerError: '',
      loggingIn: false,
      registering: false,
      products: [],
      loading: false,
      error: null,
      // 后端服务状态
      backendAvailable: false,
      showBackendWarning: false,
      // 个人信息模块显示状态
      showUserProfile: false
    };
  },
  mounted() {
    // 初始化导航功能 - 优先加载关键功能
    this.initNavigation();
    
    // 初始化轮播功能
    this.initCarousel();
    
    // 延迟初始化图表和其他非关键功能，释放主线程
      setTimeout(async () => {
        try {
          await this.initChart('api');
        } catch (error) {
          console.error('图表初始化失败:', error);
        }
      
      // 使用事件委托减少监听器数量
      document.querySelector('.chart-controls')?.addEventListener('click', (e) => {
        if (e.target.id === 'apiChartBtn') {
          this.switchChart('api');
        } else if (e.target.id === 'projectChartBtn') {
          this.switchChart('project');
        } else if (e.target.id === 'usageChartBtn') {
          this.switchChart('usage');
        }
      });
    }, 1000);
  },
  beforeUnmount() {
    // 清理图表实例
    if (this.chartInstance) {
      this.chartInstance.destroy();
    }
    // 清理滚动事件监听器
    window.removeEventListener('scroll', this.handleScroll);
    // 清理轮播定时器
    this.stopCarousel();
  },
  methods: {
    // 初始化导航功能
    initNavigation() {
      // 添加平滑滚动
      document.querySelectorAll('.nav-link, .dropdown-item, .btn-secondary[href^="#"]').forEach(link => {
        link.addEventListener('click', (e) => {
          // 只在目标元素存在时才阻止默认行为
          const targetId = link.getAttribute('href');
          const targetElement = document.querySelector(targetId);
          
          if (targetElement) {
            e.preventDefault();
            window.scrollTo({
              top: targetElement.offsetTop - 80, // 考虑导航栏高度
              behavior: 'smooth'
            });
            
            // 设置当前激活的链接
            this.setActiveLink(link.getAttribute('data-target') || targetId.substring(1));
            
            // 关闭移动菜单
            this.closeMenu();
          }
        });
      });
      
      // 添加滚动监听
      window.addEventListener('scroll', this.handleScroll);
      
      // 初始化时检查当前位置
      this.handleScroll();
      
      // 添加汉堡菜单交互
      this.initMobileMenu();
      
      // 添加下拉菜单交互
      this.initDropdowns();
    },
    
    // 初始化移动菜单
    initMobileMenu() {
      // 创建遮罩层元素
      if (!document.querySelector('.nav-overlay')) {
        const overlay = document.createElement('div');
        overlay.className = 'nav-overlay';
        document.body.appendChild(overlay);
      }
      
      // 添加汉堡菜单按钮
      const navbar = document.querySelector('.navbar');
      if (navbar && !document.querySelector('.menu-toggle')) {
        const menuToggle = document.createElement('button');
        menuToggle.className = 'menu-toggle';
        menuToggle.innerHTML = '<span class="bar"></span>';
        navbar.appendChild(menuToggle);
        
        // 添加点击事件
        menuToggle.addEventListener('click', this.toggleMenu);
      }
      
      // 遮罩层点击事件
      document.querySelector('.nav-overlay').addEventListener('click', this.closeMenu);
    },
    
    // 初始化轮播功能
    initCarousel() {
      this.currentSlide = 0;
      this.carouselImages = this.$refs.carousel?.querySelectorAll('.carousel-image') || [];
      
      // 初始化时先应用默认样式，不依赖图片分析
      this.applyDefaultContentStyles();
      
      // 使用更长的轮播间隔，减少频繁切换
      this.carouselInterval = setInterval(() => {
        // 使用requestAnimationFrame确保流畅动画
        requestAnimationFrame(() => this.nextSlide());
      }, 4000);
      
      // 延迟并分批分析图片亮度，避免阻塞主线程
      if ('requestIdleCallback' in window) {
        requestIdleCallback(() => this.batchAnalyzeImages(), { timeout: 2000 });
      } else {
        // 降级方案
        setTimeout(() => this.batchAnalyzeImages(), 1500);
      }
    },
    
    // 添加新方法：批量分析图片
    batchAnalyzeImages() {
      this.imageAnalysisCache = [];
      const images = Array.from(this.carouselImages);
      
      // 分批处理，避免一次性处理所有图片
      const processBatch = (batchIndex) => {
        if (batchIndex >= images.length) return;
        
        // 创建一个新的Promise来分析当前图片
        const imgElement = images[batchIndex];
        const bgImage = imgElement.style.backgroundImage;
        const imgUrl = bgImage.replace(/url\(['"]?([^'"]*)['"]?\)/, '$1');
        
        // 使用图片元素上的自然宽高快速估计亮度，减少canvas操作
        if (imgElement.naturalWidth && imgElement.naturalHeight) {
          // 简单估算亮度，避免完整分析
          const estimatedBrightness = this.estimateImageBrightness(imgUrl);
          this.imageAnalysisCache[batchIndex] = {
            brightness: estimatedBrightness,
            rgb: this.getEstimatedRGB(estimatedBrightness)
          };
          
          // 安排下一批处理
          setTimeout(() => processBatch(batchIndex + 1), 100);
        } else {
          // 降级到原来的分析方式但使用web worker或降级分析
          this.fastAnalyzeImage(imgUrl, batchIndex).then(() => {
            setTimeout(() => processBatch(batchIndex + 1), 100);
          });
        }
      };
      
      // 开始处理第一批
      processBatch(0);
    },
    
    // 添加新方法：快速分析图片
    async fastAnalyzeImage(imgUrl, index) {
      try {
        // 使用更小的样本和更少的计算
        const img = new Image();
        img.crossOrigin = 'anonymous';
        
        await new Promise((resolve, reject) => {
          img.onload = resolve;
          img.onerror = reject;
          img.src = imgUrl;
        });
        
        // 简化的亮度分析
        const brightness = this.getSimplifiedBrightness(img);
        this.imageAnalysisCache[index] = {
          brightness,
          rgb: { r: Math.floor(brightness * 255), g: Math.floor(brightness * 255), b: Math.floor(brightness * 255) }
        };
      } catch (error) {
        // 出错时使用默认值
        this.imageAnalysisCache[index] = { brightness: 0.3, rgb: { r: 0, g: 0, b: 0 } };
      }
    },
    
    // 添加新方法：简化的亮度计算
    getSimplifiedBrightness(img) {
      // 使用更小的采样区域
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      
      const size = 15; // 减小采样尺寸
      canvas.width = size;
      canvas.height = size;
      
      ctx.drawImage(img, 0, 0, size, size);
      
      // 只采样少量像素点
      let totalBrightness = 0;
      const samplePoints = 16; // 只采样16个点
      
      for (let i = 0; i < samplePoints; i++) {
        const x = Math.floor(Math.random() * size);
        const y = Math.floor(Math.random() * size);
        const pixel = ctx.getImageData(x, y, 1, 1).data;
        // 简化的亮度计算
        const brightness = (pixel[0] + pixel[1] + pixel[2]) / (255 * 3);
        totalBrightness += brightness;
      }
      
      return totalBrightness / samplePoints;
    },
    
    // 添加新方法：基于URL简单估计亮度
    estimateImageBrightness(url) {
      // 基于URL模式简单估计，用于快速响应
      const darkKeywords = ['night', 'dark', 'black', 'shadow'];
      const lightKeywords = ['light', 'bright', 'white', 'sun'];
      
      const lowerUrl = url.toLowerCase();
      
      for (const keyword of darkKeywords) {
        if (lowerUrl.includes(keyword)) {
          return 0.3; // 估计为暗色
        }
      }
      
      for (const keyword of lightKeywords) {
        if (lowerUrl.includes(keyword)) {
          return 0.7; // 估计为亮色
        }
      }
      
      return 0.5; // 默认中间亮度
    },
    
    // 添加新方法：基于亮度估计RGB
    getEstimatedRGB(brightness) {
      const value = Math.floor(brightness * 255);
      return { r: value, g: value, b: value };
    },
    
    // 添加新方法：应用默认内容样式
    applyDefaultContentStyles() {
      const heroContent = document.querySelector('.hero-content');
      if (!heroContent) return;
      
      // 设置基础样式
      heroContent.style.transition = 'all 0.6s ease';
      heroContent.style.color = 'white';
      heroContent.style.textShadow = '0 2px 6px rgba(0, 0, 0, 0.9)';
    },
    
    // 预先分析所有图片的亮度
    preAnalyzeAllImages() {
      this.imageAnalysisCache = [];
      
      // 只对当前显示的图片立即分析，其余使用requestIdleCallback
      this.carouselImages.forEach((imgElement, index) => {
        // 从背景图片获取URL
        const bgImage = imgElement.style.backgroundImage;
        let imgUrl = bgImage.replace(/url\(['"]?([^'"]*)['"]?\)/, '$1');
        
        // 转换为响应式图片URL
        imgUrl = this.getResponsiveImageUrl(imgUrl);
        
        // 对于当前显示的图片，立即分析
        if (index === this.currentSlide) {
          this.analyzeImageForBrightness(imgUrl, index);
        } else {
          // 对于其他图片，使用requestIdleCallback延迟分析
          const analyzeImageTask = () => {
            this.analyzeImageForBrightness(imgUrl, index);
          };
          
          if ('requestIdleCallback' in window) {
            requestIdleCallback(analyzeImageTask, { timeout: 1000 });
          } else {
            setTimeout(analyzeImageTask, 200 + index * 50);
          }
        }
      });
    },
    
    // 分析图片亮度的辅助方法
    analyzeImageForBrightness(imgUrl, index) {
      const analyzePromise = new Promise((resolve, reject) => {
        const img = new Image();
        img.crossOrigin = 'anonymous';
        
        img.onload = () => {
          try {
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            
            // 进一步减小尺寸以提高性能
            const size = 15; // 从30减小到15
            canvas.width = size;
            canvas.height = size;
            
            ctx.drawImage(img, 0, 0, size, size);
            const imageData = ctx.getImageData(0, 0, size, size);
            const data = imageData.data;
            
            // 使用更少的采样点进行计算
            let r = 0, g = 0, b = 0;
            let count = 0;
            const skipPixels = 2; // 每2个像素采样一次
            
            for (let i = 0; i < data.length; i += 4 * skipPixels) {
              r += data[i];
              g += data[i + 1];
              b += data[i + 2];
              count++;
            }
            
            // 避免除零
            if (count === 0) count = 1;
            
            r = Math.round(r / count);
            g = Math.round(g / count);
            b = Math.round(b / count);
            
            // 计算相对亮度 (WCAG公式)
            const brightness = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
            
            resolve({ brightness, rgb: { r, g, b } });
          } catch (error) {
            reject(error);
          }
        };
        
        img.onerror = reject;
        img.src = imgUrl;
      });
      
      // 存储分析结果，失败时使用默认值
      analyzePromise.catch(() => {
        console.warn(`无法分析图片 ${index + 1}，使用默认亮度`);
        return { brightness: 0.3, rgb: { r: 0, g: 0, b: 0 } }; // 默认暗色调
      }).then(result => {
        this.imageAnalysisCache[index] = result;
      });
    },
    
    // 响应式图片加载 - 获取适合当前设备的图片URL
    getResponsiveImageUrl(originalUrl, width = null) {
      // 如果没有指定宽度，根据设备视口宽度确定
      const targetWidth = width || 
        (window.innerWidth > 1200 ? 1920 : 
         window.innerWidth > 768 ? 1280 : 800);
      
      // 对于picsum.photos的URL，可以直接修改尺寸
      if (originalUrl.includes('picsum.photos')) {
        // 提取ID
        const idMatch = originalUrl.match(/id\/(\d+)/);
        const id = idMatch ? idMatch[1] : '1';
        // 返回响应式尺寸的URL
        return `https://picsum.photos/id/${id}/${targetWidth}/${Math.round(targetWidth * 9/16)}`;
      }
      
      // 对于其他URL，返回原始URL（在实际项目中，可以根据需要添加其他URL处理逻辑）
      return originalUrl;
    },
    
    // 图片预加载功能
    preloadImage(url) {
      return new Promise((resolve, reject) => {
        const img = new Image();
        img.onload = () => resolve(img);
        img.onerror = reject;
        img.src = url;
      });
    },
    
    // 批量预加载关键图片
    preloadCriticalImages() {
      // 确定需要预加载的图片列表
      const imagesToPreload = [];
      
      // 预加载当前和下一张轮播图
      if (this.carouselImages && this.carouselImages.length > 0) {
        const currentImg = this.carouselImages[this.currentSlide];
        const nextImg = this.carouselImages[(this.currentSlide + 1) % this.carouselImages.length];
        
        if (currentImg) {
          const currentUrl = currentImg.style.backgroundImage.replace(/url\(['"]?([^'"]*)['"]?\)/, '$1');
          imagesToPreload.push(this.getResponsiveImageUrl(currentUrl));
        }
        
        if (nextImg) {
          const nextUrl = nextImg.style.backgroundImage.replace(/url\(['"]?([^'"]*)['"]?\)/, '$1');
          imagesToPreload.push(this.getResponsiveImageUrl(nextUrl));
        }
      }
      
      // 执行预加载
      return Promise.allSettled(
        imagesToPreload.map(url => this.preloadImage(url))
      );
    },
    
    // 切换到下一张幻灯片
    nextSlide() {
      if (this.carouselImages.length === 0) return;
      
      // 计算下一张幻灯片的索引
      const nextSlideIndex = (this.currentSlide + 1) % this.carouselImages.length;
      
      // 只在图片分析结果可用时预先准备样式
      if (this.imageAnalysisCache && this.imageAnalysisCache[nextSlideIndex]) {
        this.prepareNextSlideStyles(nextSlideIndex);
      }
      
      // 使用requestAnimationFrame确保流畅的图片切换
      requestAnimationFrame(() => {
        // 切换图片
        this.carouselImages[this.currentSlide].classList.remove('active');
        this.currentSlide = nextSlideIndex;
        this.carouselImages[this.currentSlide].classList.add('active');
        
        // 确保样式正确应用，但避免重复计算
        if (!this.imageAnalysisCache || !this.imageAnalysisCache[nextSlideIndex]) {
          this.applyContentStyles();
        }
      });
    },
    
    // 准备下一张幻灯片的样式
    prepareNextSlideStyles(nextSlideIndex) {
      // 如果已经缓存了分析结果，直接使用
      if (this.imageAnalysisCache && this.imageAnalysisCache[nextSlideIndex]) {
        const { brightness, rgb } = this.imageAnalysisCache[nextSlideIndex];
        this.adjustContentStylesForNextSlide(brightness, rgb);
      } else {
        // 否则使用默认的平滑过渡
        this.applyDefaultTransitionStyles();
      }
    },
    
    // 缓存DOM引用，避免重复查询
    cachedElements: {
      heroContent: null,
      heroButtons: null,
      heroH2: null
    },
    
    // 获取并缓存DOM元素
    getCachedElement(selector, key) {
      if (!this.cachedElements[key] || !this.cachedElements[key].isConnected) {
        this.cachedElements[key] = this.$el ? this.$el.querySelector(selector) : document.querySelector(selector);
      }
      return this.cachedElements[key];
    },
    
    // 为下一张幻灯片调整内容样式
    adjustContentStylesForNextSlide(brightness, rgb) {
      const heroContent = this.getCachedElement('.hero-content', 'heroContent');
      if (!heroContent) return;
      
      // 判断背景是亮色还是暗色
      const isDarkBackground = brightness < 0.5;
      
      // 预先计算样式对象，一次性应用，减少重排重绘
      const contentStyles = {};
      
      if (isDarkBackground) {
        // 深色背景使用白色文本，增强阴影和边框
        contentStyles.color = 'white';
        contentStyles.textShadow = '0 2px 6px rgba(0, 0, 0, 0.9), 0 1px 2px rgba(0, 0, 0, 0.8)';
        contentStyles.backgroundColor = 'rgba(0, 0, 0, 0.15)';
      } else {
        // 浅色背景使用深色文本
        contentStyles.color = '#1a1a1a';
        contentStyles.textShadow = '0 1px 3px rgba(255, 255, 255, 0.8), 0 0 10px rgba(255, 255, 255, 0.5)';
        contentStyles.backgroundColor = 'rgba(255, 255, 255, 0.25)';
      }
      
      // 通用样式
      contentStyles.padding = '30px';
      contentStyles.borderRadius = '15px';
      
      // 一次性应用样式，减少DOM操作
      Object.assign(heroContent.style, contentStyles);
      
      // 优化按钮样式调整，只在必要时进行
      if (!this.skipButtonUpdate) {
        const buttons = this.getCachedElement('.hero-content .btn-primary', 'heroButtons') || 
                       heroContent.querySelectorAll('.btn-primary');
        
        // 如果是单个元素而不是NodeList，包装成数组
        const buttonsArray = buttons instanceof NodeList ? Array.from(buttons) : [buttons].filter(Boolean);
        
        buttonsArray.forEach(btn => {
          btn.style.color = 'white';
          btn.style.boxShadow = isDarkBackground ? 
            '0 6px 16px rgba(0, 0, 0, 0.5)' : 
            '0 6px 16px rgba(108, 99, 255, 0.4)';
          btn.style.transform = 'translateY(0)';
          btn.setAttribute('data-dark-bg', isDarkBackground.toString());
        });
        
        // 设置标志避免短时间内重复更新
        this.skipButtonUpdate = true;
        setTimeout(() => {
          this.skipButtonUpdate = false;
        }, 500);
      }
      
      // 为标题添加特殊处理以增强辨识度
      const h2 = this.getCachedElement('.hero-content h2', 'heroH2') || 
                 heroContent.querySelector('h2');
      
      if (h2) {
        // 只在样式不同时更新
        if (h2.style.transition !== 'all 0.3s ease') {
          h2.style.transition = 'all 0.3s ease';
        }
        if (h2.style.fontWeight !== '700') {
          h2.style.fontWeight = '700';
        }
        if (h2.style.letterSpacing !== '0.5px') {
          h2.style.letterSpacing = '0.5px';
        }
      }
    },
    
    // 应用默认过渡样式
    applyDefaultTransitionStyles() {
      const heroContent = document.querySelector('.hero-content');
      if (!heroContent) return;
      
      // 使用当前样式作为基础，确保平滑过渡
      heroContent.style.transition = 'all 0.5s ease-in-out';
    },
    
    // 应用内容样式
    applyContentStyles() {
      if (this.imageAnalysisCache && this.imageAnalysisCache[this.currentSlide]) {
        const { brightness, rgb } = this.imageAnalysisCache[this.currentSlide];
        this.adjustContentStylesForNextSlide(brightness, rgb);
      } else {
        // 回退到直接分析当前图片
        this.analyzeCurrentImageAndAdjustContrast();
      }
    },
    
    // 分析当前图片并调整对比度
    analyzeCurrentImageAndAdjustContrast() {
      // 添加全面的边界检查
      if (!this.carouselImages || this.carouselImages.length === 0 || this.currentSlide === undefined) {
        return;
      }
      
      const activeImage = this.carouselImages[this.currentSlide];
      const heroContent = this.$el.querySelector('.hero-content'); // 使用$el避免全局查询
      
      if (!activeImage || !heroContent) {
        console.warn('无法访问轮播图片或英雄内容元素');
        return;
      }
      
      try {
        // 从背景图片获取URL
        const bgImage = activeImage.style.backgroundImage;
        if (!bgImage) {
          console.warn('背景图片URL为空');
          this.applyDefaultTextStyles(heroContent);
          return;
        }
        
        const imgUrl = bgImage.replace(/url\(['"]?([^'"]*)['"]?\)/, '$1');
        if (!imgUrl || imgUrl === bgImage) {
          console.warn('无法提取有效的图片URL');
          this.applyDefaultTextStyles(heroContent);
          return;
        }
        
        // 优化图片分析：使用更小的缩略图和更少的像素计算
        const img = new Image();
        img.crossOrigin = 'anonymous';
        
        // 设置较短的超时时间，避免长时间阻塞
        const timeoutId = setTimeout(() => {
          img.onload = null;
          img.onerror = null;
          console.warn('图片分析超时');
          this.applyDefaultTextStyles(heroContent);
        }, 500); // 减少超时时间到500ms
        
        img.onload = () => {
          clearTimeout(timeoutId);
          
          try {
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            
            // 进一步减小采样尺寸以提高性能
            const size = 20; // 从30减小到20
            canvas.width = size;
            canvas.height = size;
            
            // 绘制图片到canvas
            ctx.drawImage(img, 0, 0, size, size);
            
            // 获取图像数据
            const imageData = ctx.getImageData(0, 0, size, size);
            const data = imageData.data;
            
            // 优化计算：使用更大的步进，进一步减少计算量
            let r = 0, g = 0, b = 0;
            let count = 0;
            const step = 4; // 每4个像素采样一次，减少75%的计算量
            
            for (let i = 0; i < data.length; i += step * 4) {
              r += data[i];
              g += data[i + 1];
              b += data[i + 2];
              count++;
            }
            
            // 快速计算平均值，避免重复除法
            const factor = 1 / count;
            const avgR = Math.round(r * factor);
            const avgG = Math.round(g * factor);
            const avgB = Math.round(b * factor);
            
            // 计算相对亮度 (WCAG公式)，避免除以255
            const brightness = (0.299 * avgR + 0.587 * avgG + 0.114 * avgB) * 0.003921568627451; // 1/255的预计算值
            
            // 缓存分析结果
            if (!this.imageAnalysisCache) this.imageAnalysisCache = {};
            this.imageAnalysisCache[this.currentSlide] = { 
              brightness, 
              rgb: { r: avgR, g: avgG, b: avgB },
              timestamp: Date.now()
            };
            
            // 异步应用样式，避免阻塞主线程
            requestAnimationFrame(() => {
              this.adjustContentStylesForNextSlide(brightness, { r: avgR, g: avgG, b: avgB });
            });
          } catch (canvasError) {
            // 减少错误日志输出，避免性能影响
            console.warn('Canvas处理失败');
            this.applyDefaultTextStyles(heroContent);
          }
        };
        
        img.onerror = () => {
          clearTimeout(timeoutId);
          console.warn('图片加载失败');
          this.applyDefaultTextStyles(heroContent);
        };
        
        // 开始加载图片
        img.src = imgUrl;
      } catch (error) {
        console.warn('图片分析过程出错:', error);
        this.applyDefaultTextStyles(heroContent);
      }
    },
    
    // 应用默认文本样式，当图片分析失败时使用
    applyDefaultTextStyles(element) {
      if (!element) return;
      
      // 使用requestAnimationFrame确保流畅的样式应用
      requestAnimationFrame(() => {
        element.style.color = 'white';
        element.style.textShadow = '0 2px 6px rgba(0, 0, 0, 0.9)';
        element.style.backgroundColor = 'rgba(0, 0, 0, 0.2)';
        element.style.padding = '20px';
        element.style.borderRadius = '10px';
        element.style.transition = 'all 0.3s ease';
      });
    },
    
    // 应用默认内容样式
    applyDefaultContentStyles() {
      const heroContent = document.querySelector('.hero-content');
      if (heroContent) {
        heroContent.style.color = 'white';
        heroContent.style.textShadow = '0 2px 6px rgba(0, 0, 0, 0.9)';
        heroContent.style.backgroundColor = 'rgba(0, 0, 0, 0.15)';
        heroContent.style.padding = '30px';
        heroContent.style.borderRadius = '15px';
      }
    },
    
    // 导航到API服务区域
    navigateToApiServices(event) {
      // 阻止事件冒泡，避免触发不必要的父级事件
      if (event && event.stopPropagation) {
        event.stopPropagation();
      }
      
      // 检查点击目标是否为链接或其子元素，如果是则不进行额外跳转
      if (event && (event.target.tagName === 'A' || event.target.closest('a'))) {
        return;
      }
      
      // 对于section的空白区域点击，执行滚动到API服务区域
      const apiServicesSection = document.getElementById('api-services');
      if (apiServicesSection) {
        window.scrollTo({
          top: apiServicesSection.offsetTop - 80,
          behavior: 'smooth'
        });
      }
      
      // 模拟API服务页面跳转行为
      console.log('跳转到API服务页面或触发API服务相关功能');
      
      // 可以添加额外的业务逻辑，比如调用API服务、显示模态框等
      this.$emit('api-services-accessed');
      
      // 可选：添加动画或过渡效果
      this.showApiServicesAnimation();
    },
    
    // 显示API服务访问动画效果
    showApiServicesAnimation() {
      const aiServicesSection = document.getElementById('ai-services');
      if (aiServicesSection) {
        // 添加一个临时的动画类
        aiServicesSection.classList.add('services-access-animation');
        
        // 移除动画类，以便下次触发
        setTimeout(() => {
          aiServicesSection.classList.remove('services-access-animation');
        }, 500);
      }
    },
    stopCarousel() {
      if (this.carouselInterval) {
        clearInterval(this.carouselInterval);
      }
    },
    
    // 开始轮播
    startCarousel() {
      this.stopCarousel();
      this.carouselInterval = setInterval(() => {
        this.nextSlide();
      }, 3000);
    },
    
    // 更新轮播图片（预留API对接接口）
    updateCarouselImages(images) {
      if (!images || !images.length) return;
      
      // 停止轮播
      this.stopCarousel();
      
      // 清空现有图片
      const carousel = this.$refs.carousel;
      carousel.innerHTML = '';
      
      // 添加新图片
      images.forEach((imgUrl, index) => {
        const imgDiv = document.createElement('div');
        imgDiv.className = `carousel-image ${index === 0 ? 'active' : ''}`;
        imgDiv.style.backgroundImage = `url('${imgUrl}')`;
        carousel.appendChild(imgDiv);
      });
      
      // 重新初始化
      this.currentSlide = 0;
      this.carouselImages = carousel.querySelectorAll('.carousel-image');
      
      // 重新分析所有图片
      this.preAnalyzeAllImages();
      
      // 应用第一张图片的样式
      setTimeout(() => {
        this.applyContentStyles();
      }, 100);
      
      this.startCarousel();
      
      // 触发自定义事件，通知外部轮播图片已更新
      this.$emit('carousel-images-updated', images);
    },
    
    // 初始化下拉菜单
    initDropdowns() {
      const dropdownToggles = document.querySelectorAll('.dropdown-toggle');
      const dropdowns = document.querySelectorAll('.dropdown');
      
      // 点击切换下拉菜单
      dropdownToggles.forEach(toggle => {
        toggle.addEventListener('click', (e) => {
          e.preventDefault();
          const dropdown = toggle.closest('.dropdown');
          const isMobile = window.innerWidth <= 992;
          
          // 如果不是移动设备，切换活动状态
          if (!isMobile) {
            dropdown.classList.toggle('active');
            
            // 确保下拉菜单在点击时显示
            if (dropdown.classList.contains('active')) {
              setTimeout(() => {
                const menu = dropdown.querySelector('.dropdown-menu');
                if (menu) {
                  menu.style.opacity = '1';
                  menu.style.visibility = 'visible';
                  menu.style.transform = 'translateY(8px)';
                }
              }, 10);
            }
          } else {
            // 移动设备：切换下拉菜单
            dropdown.classList.toggle('active');
          }
          
          // 关闭其他下拉菜单
          dropdowns.forEach(otherDropdown => {
            if (otherDropdown !== dropdown) {
              otherDropdown.classList.remove('active');
              if (!isMobile) {
                const otherMenu = otherDropdown.querySelector('.dropdown-menu');
                if (otherMenu) {
                  otherMenu.style.opacity = '0';
                  otherMenu.style.visibility = 'hidden';
                  otherMenu.style.transform = 'translateY(12px)';
                }
              }
            }
          });
        });
      });
      
      // 点击页面其他地方关闭下拉菜单
      document.addEventListener('click', (e) => {
        if (!e.target.closest('.dropdown') && window.innerWidth > 992) {
          dropdowns.forEach(dropdown => {
            dropdown.classList.remove('active');
            const menu = dropdown.querySelector('.dropdown-menu');
            if (menu) {
              menu.style.opacity = '0';
              menu.style.visibility = 'hidden';
              menu.style.transform = 'translateY(12px)';
            }
          });
        }
      });
      
      // 优化桌面端的hover效果，添加延迟以避免意外触发
      dropdowns.forEach(dropdown => {
        let hoverTimeout;
        
        dropdown.addEventListener('mouseenter', () => {
          if (window.innerWidth > 992 && !dropdown.classList.contains('active')) {
            hoverTimeout = setTimeout(() => {
              const menu = dropdown.querySelector('.dropdown-menu');
              if (menu) {
                menu.style.opacity = '1';
                menu.style.visibility = 'visible';
                menu.style.transform = 'translateY(8px)';
              }
            }, 150); // 添加150ms延迟
          }
        });
        
        dropdown.addEventListener('mouseleave', () => {
          clearTimeout(hoverTimeout);
          if (window.innerWidth > 992 && !dropdown.classList.contains('active')) {
            const menu = dropdown.querySelector('.dropdown-menu');
            if (menu) {
              menu.style.opacity = '0';
              menu.style.visibility = 'hidden';
              menu.style.transform = 'translateY(12px)';
            }
          }
        });
      });
    },
    
    // 切换菜单
    toggleMenu() {
      this.isMenuOpen = !this.isMenuOpen;
      
      const menuToggle = document.querySelector('.menu-toggle');
      const navLinks = document.querySelector('.nav-links');
      const navOverlay = document.querySelector('.nav-overlay');
      
      if (menuToggle && navLinks && navOverlay) {
        menuToggle.classList.toggle('active');
        navLinks.classList.toggle('active');
        navOverlay.classList.toggle('active');
        
        // 控制body滚动
        document.body.style.overflow = this.isMenuOpen ? 'hidden' : '';
      }
    },
    
    // 关闭菜单
    closeMenu() {
      this.isMenuOpen = false;
      
      const menuToggle = document.querySelector('.menu-toggle');
      const navLinks = document.querySelector('.nav-links');
      const navOverlay = document.querySelector('.nav-overlay');
      const dropdowns = document.querySelectorAll('.dropdown');
      
      if (menuToggle) menuToggle.classList.remove('active');
      if (navLinks) navLinks.classList.remove('active');
      if (navOverlay) navOverlay.classList.remove('active');
      
      // 关闭所有下拉菜单
      dropdowns.forEach(dropdown => {
        dropdown.classList.remove('active');
      });
      
      document.body.style.overflow = '';
    },
    
    // 设置激活的导航链接
    setActiveLink(targetId) {
      // 移除所有激活状态
      document.querySelectorAll('.nav-link, .dropdown-item, .btn-secondary[href^="#"]').forEach(link => {
        link.classList.remove('active');
      });
      
      // 激活对应的链接 (同时检查data-target和href)
      document.querySelectorAll(`[data-target="${targetId}"], [href="#${targetId}"]`).forEach(link => {
        link.classList.add('active');
      });
    },
    
    // 处理滚动事件
    handleScroll() {
      const scrollPosition = window.scrollY + 100; // 添加偏移量
      
      // 处理导航栏滚动样式变化
      const header = document.querySelector('.header');
      if (header) {
        if (window.scrollY > 50) {
          header.classList.add('scrolled');
        } else {
          header.classList.remove('scrolled');
        }
      }
      
      // 获取所有章节
      const sections = document.querySelectorAll('section[id]');
      
      // 遍历章节，找到当前可见的章节
      let currentSection = null;
      sections.forEach(section => {
        const sectionTop = section.offsetTop;
        const sectionHeight = section.offsetHeight;
        
        if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) {
          currentSection = section.id;
        }
      });
      
      // 如果找到了当前章节，设置对应的导航链接为激活状态
      if (currentSection) {
        this.setActiveLink(currentSection);
      }
    },
    
    // 初始化图表（异步方法）
    async initChart(type) {
      const ctx = document.getElementById('userDataChart').getContext('2d');
      
      // 销毁现有图表
      if (this.chartInstance) {
        this.chartInstance.destroy();
      }
      
      let config;
      
      switch (type) {
        case 'api':
          // API调用统计 - 折线图
          config = {
            type: 'line',
            data: {
              labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
              datasets: [{
                label: 'API调用次数',
                data: [120, 190, 230, 180, 320, 405],
                borderColor: '#4f46e5',
                backgroundColor: 'rgba(79, 70, 229, 0.1)',
                tension: 0.4,
                fill: true
              }]
            },
            options: this.getChartOptions('API调用趋势 (最近6个月)', '调用次数')
          };
          break;
          
        case 'project':
          // 项目活跃度 - 柱状图
          config = {
            type: 'bar',
            data: {
              labels: ['项目A', '项目B', '项目C', '项目D', '项目E', '项目F'],
              datasets: [{
                label: '本周活跃度',
                data: [65, 59, 80, 81, 56, 55],
                backgroundColor: '#10b981'
              }, {
                label: '上周活跃度',
                data: [28, 48, 40, 19, 86, 27],
                backgroundColor: '#6b7280'
              }]
            },
            options: this.getChartOptions('项目活跃度对比', '活跃度指数')
          };
          break;
          
        case 'usage':
          // 功能使用分布 - 饼图
          config = {
            type: 'doughnut',
            data: {
              labels: ['语音AI', '图像AI', '文本AI', 'API服务', 'AI Agent'],
              datasets: [{
                data: [30, 25, 20, 15, 10],
                backgroundColor: ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6']
              }]
            },
            options: {
              responsive: true,
              maintainAspectRatio: false,
              plugins: {
                title: {
                  display: true,
                  text: '功能使用分布',
                  font: {
                    size: 16,
                    weight: 'bold'
                  }
                },
                legend: {
                  position: 'right'
                }
              }
            }
          };
          break;
      }
      
      // 异步创建图表，确保Chart.js已加载
      const Chart = await loadChartJs();
      if (Chart) {
        this.chartInstance = new Chart(ctx, config);
      } else {
        console.warn('无法创建图表：Chart.js未加载');
        // 显示替代内容
        if (ctx) {
          const canvas = ctx.canvas;
          const placeholder = document.createElement('div');
          placeholder.className = 'chart-placeholder';
          placeholder.textContent = '图表加载失败，请刷新页面重试';
          canvas.parentNode.appendChild(placeholder);
          canvas.style.display = 'none';
        }
      }
    },
    
    // 切换图表（异步方法）
    async switchChart(type) {
      // 更新按钮状态
      const buttons = document.querySelectorAll('.chart-btn');
      buttons.forEach(btn => btn.classList.remove('active'));
      
      switch (type) {
        case 'api':
          document.getElementById('apiChartBtn').classList.add('active');
          break;
        case 'project':
          document.getElementById('projectChartBtn').classList.add('active');
          break;
        case 'usage':
          document.getElementById('usageChartBtn').classList.add('active');
          break;
      }
      
      // 重新初始化图表
      try {
        await this.initChart(type);
      } catch (error) {
        console.error('图表切换失败:', error);
      }
    },
    
    // 获取图表选项
    getChartOptions(title, yLabel) {
      return {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          title: {
            display: true,
            text: title,
            font: {
              size: 16,
              weight: 'bold'
            }
          },
          legend: {
            display: true,
            position: 'top'
          }
        },
        scales: {
          y: {
            beginAtZero: true,
            title: {
              display: true,
              text: yLabel
            }
          },
          x: {
            title: {
              display: true,
              text: ''
            }
          }
        },
        interaction: {
          mode: 'index',
          intersect: false
        },
        animation: {
          duration: 750,
          easing: 'easeInOutQuart'
        }
      };
    }
  },
  mounted() {
    // 检查是否已登录
    this.checkAuthStatus();
    // 检查后端服务状态
    this.checkBackendStatus();
    // 获取产品数据
    this.fetchProducts();
  },
  methods: {
    // 检查后端服务状态
    checkBackendStatus() {
      // 导入productService
      import('./services/api.js').then(({ productService }) => {
        // 使用productService调用API
        productService.getProducts()
          .then(() => {
            console.log('后端服务可用');
            this.backendAvailable = true;
          })
          .catch(() => {
            console.log('后端服务不可用，将使用模拟数据');
            this.backendAvailable = false;
            this.showBackendWarning = true;
            // 5秒后隐藏警告
            setTimeout(() => {
              this.showBackendWarning = false;
            }, 5000);
          });
      });
    },
    
    // 检查认证状态
    checkAuthStatus() {
      const token = localStorage.getItem('authToken');
      if (token) {
        this.isAuthenticated = true;
        this.username = localStorage.getItem('username') || '用户';
      }
    },
    
    // 登录
    async login(credentials) {
      // 如果后端不可用，使用模拟登录
      if (!this.backendAvailable) {
        // 模拟登录成功
        localStorage.setItem('authToken', 'mock-token-' + Date.now());
        localStorage.setItem('username', credentials.username);
        this.isAuthenticated = true;
        this.username = credentials.username;
        this.showLoginModal = false;
        return { success: true };
      }
      
      try {
        // 导入authService并使用正确的登录方法
        const { authService } = await import('./services/api.js');
        const response = await authService.login(credentials.username, credentials.password);
        localStorage.setItem('authToken', response.token);
        localStorage.setItem('username', response.username);
        this.isAuthenticated = true;
        this.username = response.username;
        this.showLoginModal = false;
        return { success: true };
      } catch (error) {
        return { success: false, error: error.message || '登录失败' };
      }
    },
    
    // 注册
    async register(userData) {
      // 如果后端不可用，使用模拟注册
      if (!this.backendAvailable) {
        // 模拟注册成功
        localStorage.setItem('authToken', 'mock-token-' + Date.now());
        localStorage.setItem('username', userData.username);
        this.isAuthenticated = true;
        this.username = userData.username;
        this.showRegisterModal = false;
        return { success: true };
      }
      
      try {
        const response = await api.register(userData);
        localStorage.setItem('authToken', response.token);
        localStorage.setItem('username', response.username);
        this.isAuthenticated = true;
        this.username = response.username;
        this.showRegisterModal = false;
        return { success: true };
      } catch (error) {
        return { success: false, error: error.message || '注册失败' };
      }
    },
    
    // 登出
    logout() {
      localStorage.removeItem('authToken');
      localStorage.removeItem('username');
      this.isAuthenticated = false;
      this.username = '';
      this.showUserProfile = false;
    },
    
    // 切换显示用户个人信息
    toggleUserProfile() {
      if (this.isAuthenticated) {
        this.showUserProfile = !this.showUserProfile;
      } else {
        this.showLoginModal = true;
      }
    },
    
    // 处理登录
    async handleLogin() {
      this.loginError = '';
      this.loggingIn = true;
      
      try {
        const result = await this.login(this.loginForm);
        if (!result.success) {
          this.loginError = result.error;
        } else {
          // 清空表单
          this.loginForm = {
            username: '',
            password: ''
          };
        }
      } catch (error) {
        this.loginError = '登录过程中发生错误，请稍后重试';
        console.error('登录错误:', error);
      } finally {
        this.loggingIn = false;
      }
    },
    
    // 处理注册
    async handleRegister() {
      this.registerError = '';
      
      // 表单验证
      if (this.registerForm.password !== this.registerForm.confirmPassword) {
        this.registerError = '两次输入的密码不一致';
        return;
      }
      
      this.registering = true;
      
      try {
        const userData = {
          username: this.registerForm.username,
          email: this.registerForm.email,
          password: this.registerForm.password
        };
        
        const result = await this.register(userData);
        if (!result.success) {
          this.registerError = result.error;
        } else {
          // 清空表单
          this.registerForm = {
            username: '',
            email: '',
            password: '',
            confirmPassword: ''
          };
        }
      } catch (error) {
        this.registerError = '注册过程中发生错误，请稍后重试';
        console.error('注册错误:', error);
      } finally {
        this.registering = false;
      }
    },
    
    // 获取产品数据
    async fetchProducts() {
      this.loading = true;
      this.error = null;
      try {
        // 如果后端不可用，直接使用模拟数据
        if (!this.backendAvailable) {
          this.products = this.getMockProducts();
          return;
        }
        
        // 使用axios发送请求到后端API
        const response = await api.getProducts();
        this.products = response;
      } catch (err) {
        console.error('获取产品数据失败:', err);
        this.error = '获取产品数据失败，请稍后重试';
        // 如果后端未启动，使用模拟数据
        this.products = this.getMockProducts();
      } finally {
        this.loading = false;
      }
    },
    
    // 模拟产品数据
    getMockProducts() {
      return [
        { id: 1, name: 'AI音箱Pro', description: '智能语音交互，高品质音质', price: 999.00, stock: 100 },
        { id: 2, name: '全景智能监控系统', description: '360度全景监控，AI人脸识别', price: 2999.00, stock: 50 },
        { id: 3, name: '数据分析平台', description: '智能数据分析，趋势预测', price: 5999.00, stock: 30 },
        { id: 4, name: '安全防护AI', description: '实时安全监测，异常行为预警', price: 1999.00, stock: 80 }
      ];
    }
  }
}
</script>

<style scoped>
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.header {
  padding: 16px 0;
  background-color: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid var(--border-color);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
}

.header.scrolled {
  padding: 12px 0;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

/* Logo集成方案 - 导航栏版 */
.logo {
  position: relative;
  z-index: 1001;
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo .logo-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(79, 70, 229, 0.3);
  transition: all 0.3s ease;
  animation: subtlePulse 3s ease-in-out infinite;
}

.logo .logo-text {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-color);
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  letter-spacing: -0.5px;
  transition: all 0.3s ease;
}

@keyframes subtlePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

.logo:hover .logo-icon {
  transform: scale(1.08) rotate(5deg);
  box-shadow: 0 8px 20px rgba(79, 70, 229, 0.45);
}

.logo:hover .logo-text {
  color: var(--primary-color);
}

/* 导航链接样式 */
.nav-links {
  display: flex;
  gap: 24px;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-toggle {
  position: relative;
  padding-right: 1.5rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dropdown-toggle::after {
  content: '▼';
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.65rem;
  color: var(--text-secondary);
  transition: transform 0.3s ease, color 0.3s ease;
  pointer-events: none;
}

.dropdown:hover .dropdown-toggle::after,
.dropdown.active .dropdown-toggle::after {
  transform: translateY(-50%) rotate(180deg);
  color: var(--primary-color);
}

/* 优化的下拉菜单 */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: white;
  min-width: 180px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  padding: 0.75rem 0;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.dropdown-menu::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 24px;
  width: 12px;
  height: 12px;
  background-color: white;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  border-left: 1px solid rgba(0, 0, 0, 0.05);
  transform: rotate(45deg);
  box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.02);
}

.dropdown:hover .dropdown-menu,
.dropdown.active .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(8px);
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: 0.85rem 1.75rem;
  text-align: left;
  color: var(--text-color);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  font-size: 14px;
  font-weight: 500;
}

.dropdown-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 4px;
  height: 0;
  background-color: var(--primary-color);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateY(-50%);
  border-radius: 0 2px 2px 0;
}

.dropdown-item:hover {
  background-color: rgba(79, 70, 229, 0.04);
  color: var(--primary-color);
  padding-left: 1.9rem;
}

.dropdown-item:hover::before {
  height: 70%;
}

.dropdown-item:active {
  transform: scale(0.98);
}

/* 导航链接样式优化 */
.nav-link {
  color: var(--text-color);
  text-decoration: none;
  font-weight: 500;
  padding: 0.65rem 1.25rem;
  border-radius: 8px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  display: inline-block;
  font-size: 15px;
  background: transparent;
  border: 1px solid transparent;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  width: 0;
  height: 2px;
  background-color: var(--text-color);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateX(-50%);
  border-radius: 1px;
}

.nav-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.02), rgba(79, 70, 229, 0.05));
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 8px;
}

.nav-link:hover {
  color: var(--text-color);
  transform: translateY(-2px);
  border-color: rgba(79, 70, 229, 0.1);
}

.nav-link:hover::after {
  width: 85%;
}

.nav-link:hover::before {
  opacity: 1;
}

.nav-link:active {
  transform: translateY(0);
  transition-duration: 0.1s;
}

/* 激活状态样式增强 */
.nav-link.active,
.dropdown-item.active {
  color: var(--text-color);
  font-weight: 600;
}

.nav-link.active {
  background-color: rgba(79, 70, 229, 0.06);
  border-color: rgba(79, 70, 229, 0.2);
}

.nav-link.active::after {
  width: 85%;
  height: 3px;
  bottom: -1px;
}

.nav-link.active::before {
  opacity: 0;
}

.dropdown-item.active {
  background-color: rgba(79, 70, 229, 0.1);
  padding-left: 1.9rem;
}

.dropdown-item.active::before {
  height: 70%;
}

/* 导航操作按钮样式 */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-actions .btn {
  font-size: 14px;
  padding: 9px 22px;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid transparent;
}

.nav-actions .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2);
}

.nav-actions .btn:active {
  transform: translateY(0);
}

/* 汉堡菜单按钮 */
.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background-color: transparent;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 1001;
}

.menu-toggle:hover {
  background-color: var(--background-secondary);
  border-color: rgba(0, 0, 0, 0.1);
}

.menu-toggle .bar {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--text-color);
  border-radius: 1px;
  transition: all 0.3s ease;
  position: relative;
}

.menu-toggle .bar::before,
.menu-toggle .bar::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--text-color);
  border-radius: 1px;
  transition: all 0.3s ease;
}

.menu-toggle .bar::before {
  transform: translateY(-8px);
}

.menu-toggle .bar::after {
  transform: translateY(8px);
}

.menu-toggle.active .bar {
  background-color: transparent;
}

.menu-toggle.active .bar::before {
  transform: rotate(45deg);
  background-color: var(--text-color);
}

.menu-toggle.active .bar::after {
  transform: rotate(-45deg);
  background-color: var(--text-color);
}

.hero {
  padding: 100px 0;
  text-align: center;
  background: radial-gradient(circle at center, rgba(108, 99, 255, 0.08) 0%, transparent 70%);
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(108, 99, 255, 0.05) 0%, transparent 70%);
  border-radius: 50%;
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
}

.hero-content h2 {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 24px;
  color: var(--text-color);
  line-height: 1.2;
  letter-spacing: -0.5px;
}

.hero-content p {
    font-size: 18px;
    margin-bottom: 36px;
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .hero-content .subtitle {
    font-size: 1.1rem;
    color: var(--text-secondary);
    font-weight: 400;
    margin-bottom: 2.5rem;
  }

.section {
  padding: 80px 0;
  position: relative;
}

.section-title {
  font-size: 30px;
  text-align: center;
  margin-bottom: 40px;
  color: var(--text-color);
  font-weight: 600;
  letter-spacing: -0.5px;
}

.section-footer {
  margin-top: 40px;
  text-align: center;
}

.more-link {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  transition: all 0.3s ease;
}

.more-link:hover {
  transform: translateX(4px);
}

.more-link::after {
  content: '→';
  margin-left: 6px;
  transition: margin-left 0.3s ease;
}

.more-link:hover::after {
  margin-left: 10px;
}

.grid {
  display: grid;
  gap: 28px;
}

.grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.card {
  background-color: var(--card-bg);
  padding: 28px;
  border-radius: 20px;
  border: 1px solid var(--border-color);
  transition: all 0.3s ease;
  position: relative;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

.card-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 20px;
  transition: transform 0.5s ease;
}

.card:hover .card-img {
  transform: scale(1.03);
}

.card h3 {
  font-size: 20px;
  margin-bottom: 12px;
  color: var(--text-color);
  font-weight: 600;
  line-height: 1.4;
}

.card p {
  color: var(--text-secondary);
  line-height: 1.6;
  font-size: 15px;
}

.rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}

.stars {
  color: #ffb400;
  font-size: 14px;
}

.score {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 500;
}

.product-card {
  position: relative;
}

.product-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  background-color: var(--primary-color);
  color: white;
  padding: 6px 14px;
  border-radius: 30px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.article-card {
  position: relative;
}

.article-info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
}

.author-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border-color);
}

.author-name {
  font-size: 14px;
  color: var(--text-color);
  font-weight: 500;
}

.article-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  font-size: 14px;
  color: var(--text-secondary);
}

.article-meta span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.solution-card {
  position: relative;
}

.price-tag {
  position: absolute;
  bottom: 28px;
  right: 28px;
  background-color: var(--secondary-color);
  color: white;
  padding: 8px 16px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 600;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 60px;
  margin-bottom: 60px;
}

/* Logo集成方案 - 页脚版 */
.footer-info h3 {
  font-size: 22px;
  margin-bottom: 20px;
  color: var(--text-color);
  font-weight: 700;
  display: flex;
  align-items: center;
  font-family: 'Inter', system-ui, sans-serif;
}

.footer-info h3::before {
  content: '';
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  border-radius: 8px;
  margin-right: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='white'%3E%3Ccircle cx='18' cy='18' r='16' stroke='white' stroke-width='2' fill='none'/%3E%3Cpath d='M10 22h4v2h-4z'/%3E%3Cpath d='M22 22h4v2h-4z'/%3E%3Ccircle cx='12' cy='14' r='2'/%3E%3Ccircle cx='24' cy='14' r='2'/%3E%3Cpath d='M13 30c0-2.21 1.79-4 4-4s4 1.79 4 4' stroke='white' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-size: 18px;
  background-position: center;
  background-repeat: no-repeat;
}

.footer-info p {
  margin-bottom: 16px;
  color: var(--text-secondary);
  line-height: 1.7;
  font-size: 15px;
}

.footer-links h4,
.footer-contact h4 {
  font-size: 16px;
  margin-bottom: 20px;
  color: var(--text-color);
  font-weight: 600;
  position: relative;
  padding-bottom: 10px;
}

.footer-links h4::after,
.footer-contact h4::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 3px;
  background-color: var(--primary-color);
  border-radius: 2px;
}

.footer-links ul {
  list-style: none;
  padding: 0;
}

.footer-links li {
  margin-bottom: 16px;
}

.footer-links a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 15px;
  display: inline-block;
}

.footer-links a:hover {
  color: var(--primary-color);
  transform: translateX(4px);
}

.footer-contact p {
  margin-bottom: 16px;
  color: var(--text-secondary);
  font-size: 15px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 30px;
  border-top: 1px solid var(--border-color);
}

.social-links {
  display: flex;
  gap: 24px;
}

.social-links a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.3s ease;
  font-size: 15px;
  font-weight: 500;
}

.social-links a:hover {
  color: var(--primary-color);
}

.copyright p {
  color: var(--text-secondary);
  font-size: 14px;
}

/* 个人信息模块 */
#user-profile {
  padding: 80px 0;
  background-color: var(--background-secondary);
}

.profile-container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 40px;
  background-color: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

/* 用户信息组件已移至独立的ProfileSidebar组件 */

.profile-content {
  padding: 40px;
}

.profile-section {
  margin-bottom: 40px;
}

.profile-section h2 {
  font-size: 22px;
  color: var(--primary-color);
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--border-color);
}

.user-details {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.detail-item {
  display: flex;
  flex-direction: column;
}

.detail-label {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 5px;
}

.detail-value {
  font-size: 16px;
  font-weight: 500;
}

.chart-container {
  height: 300px;
  margin-top: 20px;
  position: relative;
}

.chart-selector {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.chart-btn {
  padding: 8px 16px;
  border: 1px solid var(--border-color);
  background-color: #ffffff;
  color: var(--text-color);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
}

.chart-btn:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.chart-btn.active {
  background-color: var(--primary-color);
  color: #ffffff;
  border-color: var(--primary-color);
}

/* 响应式调整 */
/* Logo响应式样式 */
@media (max-width: 768px) {
  .logo .logo-text {
    font-size: 20px;
  }
  
  .logo .logo-text::before {
    width: 32px;
    height: 32px;
    background-size: 20px;
  }
  
  .footer-info h3 {
    font-size: 20px;
  }
  
  .footer-info h3::before {
    width: 24px;
    height: 24px;
    background-size: 16px;
  }
}

@media (max-width: 480px) {
  .logo .logo-text {
    font-size: 18px;
  }
  
  .logo .logo-text::before {
    width: 28px;
    height: 28px;
    background-size: 18px;
    margin-right: 8px;
  }
}

@media (max-width: 992px) {
  .profile-container {
    grid-template-columns: 1fr;
  }
  
  .user-details {
    grid-template-columns: 1fr;
  }
}

/* Logo展示区样式 */
.logo-showcase-section {
  padding: 80px 0;
  background-color: var(--background-secondary);
  margin: 40px 0;
}

.logo-showcase-container {
  background-color: white;
  border-radius: 20px;
  padding: 60px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.logo-showcase-main {
  text-align: center;
  margin-bottom: 60px;
}

.logo-large {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  gap: 20px;
}

.logo-text-large {
  font-size: 48px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
}

.logo-slogan {
  font-size: 18px;
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto;
}

.logo-variations h3 {
  text-align: center;
  margin-bottom: 40px;
  font-size: 24px;
}

.variations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin-bottom: 40px;
}

.logo-variation {
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 30px;
  text-align: center;
  transition: all 0.3s ease;
}

.logo-variation:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.logo-variation h4 {
  margin-bottom: 20px;
  font-size: 16px;
  color: var(--text-secondary);
}

.logo-horizontal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.logo-horizontal span {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-color);
}

.logo-vertical {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.logo-vertical span {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-color);
}

.logo-text-only span {
  font-size: 28px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.logo-toggle-buttons {
  text-align: center;
}

@media (max-width: 768px) {
  .logo-showcase-container {
    padding: 40px 20px;
  }
  
  .logo-large {
    flex-direction: column;
    gap: 16px;
  }
  
  .logo-text-large {
    font-size: 36px;
  }
  
  .logo-slogan {
    font-size: 16px;
  }
  
  .variations-grid {
    grid-template-columns: 1fr;
  }
}

footer {
  padding: 80px 0 40px;
  margin-top: 60px;
  background-color: #ffffff;
  border-top: 1px solid var(--border-color);
}

/* 响应式导航栏样式 */
  @media (max-width: 992px) {
  /* Logo响应式调整 */
  .logo .logo-icon {
    width: 36px;
    height: 36px;
  }
  
  .logo .logo-icon svg {
    width: 36px;
    height: 36px;
  }
  
  .logo .logo-text {
    font-size: 24px;
  }
  
  /* 显示汉堡菜单按钮 */
  .menu-toggle {
    display: flex;
  }
  
  /* 隐藏桌面导航链接 */
  .nav-links {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 320px;
    height: 100vh;
    background-color: white;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    padding: 80px 24px;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-left: 1px solid var(--border-color);
    overflow-y: auto;
  }
  
  .nav-links.active {
    right: 0;
  }
  
  .nav-link {
    display: block;
    width: 100%;
    padding: 16px 20px;
    margin-bottom: 2px;
    border-radius: 8px;
    font-size: 16px;
  }
  
  .nav-link:hover {
    transform: translateY(0);
    padding-left: 22px;
  }
  
  /* 移动设备下拉菜单样式 */
  .dropdown {
    width: 100%;
    position: static;
  }
  
  .dropdown-toggle {
    width: 100%;
    padding: 16px 20px;
    text-align: left;
  }
  
  .dropdown-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: transparent;
    box-shadow: none;
    border: none;
    padding: 0 0 0 20px;
    margin: -2px 0 8px 0;
    display: none;
  }
  
  .dropdown-menu::before {
    display: none;
  }
  
  .dropdown.active .dropdown-menu {
    display: block;
  }
  
  .dropdown-item {
    padding: 12px 20px;
    font-size: 15px;
  }
  
  /* 移动设备下的导航背景遮罩 */
  .nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 999;
  }
  
  .nav-overlay.active {
    opacity: 1;
    visibility: visible;
  }
  
  .hero-content h2 {
    font-size: 36px;
  }
  
  .section {
    padding: 60px 0;
  }
}

@media (max-width: 768px) {
  /* Logo进一步响应式调整 */
  .logo .logo-icon {
    width: 32px;
    height: 32px;
  }
  
  .logo .logo-icon svg {
    width: 32px;
    height: 32px;
  }
  
  .logo .logo-text {
    font-size: 22px;
  }
  
  .hero {
    padding: 80px 0;
  }
  
  .hero-content h2 {
    font-size: 32px;
  }
  
  .hero-content p {
    font-size: 16px;
  }
  
  .section-title {
    font-size: 28px;
  }
  
  .grid-2 {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  
  .footer-bottom {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }
  
  .footer-content {
    gap: 40px;
  }
}

@media (max-width: 480px) {
    /* 小屏幕下的Logo调整 */
    .logo .logo-icon {
      width: 28px;
      height: 28px;
    }
    
    .logo .logo-icon svg {
      width: 28px;
      height: 28px;
    }
    
    .logo .logo-text {
      font-size: 20px;
    }
    
    .hero {
      padding: 60px 0;
    }
    
    .hero-content h2 {
      font-size: 28px;
    }
    
    .section {
      padding: 50px 0;
    }
    
    .section-title {
      font-size: 24px;
    }
    
    .card {
      padding: 24px;
    }
  }
  
  /* 模态框样式 */
  .modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
  }
  
  .modal-content {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
  }
  
  .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
  }
  
  .modal-header h3 {
    margin: 0;
    color: var(--text-color-primary);
  }
  
  .close-btn {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-color-secondary);
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background-color 0.2s;
  }
  
  .close-btn:hover {
    background-color: var(--background-color-hover);
  }
  
  .modal-body {
    padding: 24px;
  }
  
  .form-group {
    margin-bottom: 20px;
  }
  
  .form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-color-primary);
    font-weight: 500;
  }
  
  .form-group input {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 16px;
    transition: border-color 0.2s;
  }
  
  .form-group input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.1);
  }
  
  .error-message {
    color: var(--error-color);
    margin-bottom: 16px;
    padding: 12px;
    background-color: rgba(244, 67, 54, 0.1);
    border-radius: 6px;
  }
  
  /* 加载状态样式 */
  .loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
  }
  
  .spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-top: 4px solid var(--primary-color);
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin-bottom: 16px;
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  
  /* 产品卡片新样式 */
  .product-price {
    font-size: 20px;
    font-weight: bold;
    color: var(--primary-color);
    margin: 10px 0;
  }
  
  .product-description {
    color: var(--text-color-secondary);
    margin-bottom: 10px;
  }
  
  .product-stock {
    color: var(--success-color);
    margin-bottom: 16px;
  }
  
  .add-to-cart {
    width: 100%;
  }
  
  /* 后端服务警告样式 */
  .backend-warning {
    background-color: #fff3cd;
    color: #856404;
    padding: 12px 0;
    text-align: center;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    animation: slideDown 0.3s ease-out;
  }
  
  .backend-warning .warning-icon {
    margin-right: 8px;
    font-size: 18px;
    vertical-align: middle;
  }
  
  @keyframes slideDown {
    from {
      transform: translateY(-100%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
</style>